<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-siteapp,no-cache,no-store">
    <meta http-equiv="Expires" content="0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <title>用户列表页</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/app.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/themes/default.css}" media="all" id="skin" kit-skin />
</head>
<body>
<div class="main">
    <blockquote class="layui-elem-quote layui-row">
        <div class="layui-col-md4">
            <div class="layui-inline">
                <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-small" data-operation
                   data-options="{'type':'edit','url':'add.html','icon':'&#xe608;','title':' 增加成员','width':'700px','height':'370px','maxmin':true}">
                    <i class="layui-icon">&#xe608;</i>
                    增加成员
                </a>
                <!--<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-small" id="batchDeleteBtn">
                    <i class="layui-icon">&#xe640;</i>
                    批量删除
                </a>-->
            </div>
        </div>
        <div id="searchDiv" class="layui-col-md8" style="text-align: right;">
            <div class="layui-inline">
                <input class="layui-input" name="realName" placeholder="成员名称" id="realName">
            </div>
            <button class="layui-btn" id="searchBtn">搜索</button>
        </div>
    </blockquote>
    <table id="demo" class="layui-hide"></table>
    <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
</div>

<!-- 操作按钮 -->
<script type="text/html" id="operateBtns">
    <a class="layui-btn layui-btn-xs" data-operation th:title="修改信息"
       data-options="{'type':'edit','url':'/auth/staff/edit.html?id={{d.staffId}}','icon':'&#xe642;','title':' 修改成员','width':'700px','height':'370px','maxmin':true}">
        <i class="layui-icon">&#xe642;</i>
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-operation th:title="删除成员"
       data-options="{'type':'delete','url':'/auth/staff/deleteStaff.json?staffId={{d.staffId}}','object':'reload','remind':'确认删除吗？删除后不可恢复'}">
        <i class="layui-icon">&#xe640;</i>
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-operation title="{{d.status == 'LOCKED' ? '成员解锁' : '锁定成员'}}"
       data-options="{'type':'delete','url':'/auth/staff/lockStaff.json?operation={{d.status == 'LOCKED' ? 'unlock' : 'lock'}}&staffId={{d.staffId}}','object':'reload','remind':'确认{{d.status == 'LOCKED' ? '解锁' : '锁定'}}吗?'}">
        <i class="layui-icon layui-icon-password">&#xe770;</i>
    </a>
    <a class="layui-btn layui-bg-blue layui-btn-xs" data-operation th:title="分配角色"
       data-options="{'type':'edit','url':'/auth/staff/listStaffRoles.html?staffId={{d.staffId}}','icon':'&#xe642;','title':' 给成员【{{d.realName}}】分配角色','width':'600px','height':'400px','maxmin':true}">
        <i class="layui-icon">&#xe614;</i>
    </a>
</script>
<!-- 引用layer基本js -->
<script th:src="@{/plugins/layui/layui.js}"></script>
<script>
    layui.config({
        base : '../../build/js/',
        version : '1.0.1'
    }).use([ 'table', 'common' ], function() {
        var table = layui.table, $ = layui.$, common = layui.common, form = layui.form;

        //方法级渲染
        table.render({
            elem : '#dataTable',
            id: 'dataTable',
            url : '/auth/staff/listStaff.json?t='+new Date(), //数据接口
            page : true, //开启分页
            loading: true,	// 加载中...
            limit: 10,		// 初始分页条数，默认30
            height: 'auto', //容器高度
            cols : [ [ //表头
                {
                   /* type:'checkbox',
                    width : "5%",
                    fixed : "left"
                },{*/
                    field : 'loginName',
                    title : '用户名',
                    width: "10%",
                    sort : true
                },{
                    field : 'realName',
                    title : '昵称',
                    align:'center',
                    width: "10%",
                    sort : true
                },{
                    field : 'sexStr',
                    title : '性别',
                    width: "10%",
                    sort : true,
                }, {field : 'mobile',
                    title : '手机',
                    width: "20%",
                    sort : true
                },{
                    field : 'email',
                    title : '邮箱',
                    align:'center',
                    width: "20%",
                    sort : true
                },{
                    field : 'statusStr',
                    title : '状态',
                    width: "10%",
                    sort : true,
                }, {
                    fixed : 'right',
                    title : '操作',
                    width : "20%",
                    align : 'center',
                    toolbar : '#operateBtns'
                }] ],
            done: function(res, curr, count){
                common.render();
            }
        });
        var reload = function() {
            table.reload('dataTable', {
                url : '/auth/staff/listStaff.json?t=' + new Date(), //数据接口
                page : {
                    page : 1
                    //重新从第 1 页开始
                }, where : {
                    realName : $('#realName').val()
                }
            });
        };

        //排序
        table.on('sort(dataTable)', function(obj) {
            common.render();
        });

        //监听单元格编辑
        table.on('edit(dataTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });

        //搜索
        $('#searchBtn').on('click', function() {
            reload();
        });

        //批量删除
        $("#batchDeleteBtn").on('click', function() {
            var checkStatus = table.checkStatus('dataTable'), data = checkStatus.data;
            var ids = $.map(data, function(d) {
                return d.roleId;
            });
            if (ids !== null && ids !== undefined && ids.length >= 1) {
                var url = "delete?flag=false&staffId=" + ids;
                common.ajaxConfirm(url, "#searchBtn", "确认删除吗？删除后不可恢复");
            } else {
                common.layerMsg("请先勾选数据");
            }
        });
    });
</script>
</body>
</html>